<template>

  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="queryPage.type" class="filter-item" placeholder="项目类型" style="width: 150px" clearable>
        <el-option v-for="item in xmTypes" :key="item.code" :label="item.name" :value="item.code" />
      </el-select>
      <el-input v-model="queryPage.name" class="filter-item" placeholder="项目名称" style="width: 150px" clearable />

      <el-button class="filter-item" icon="el-icon-search" type="primary" @click="search()">
        查询
      </el-button>
    </div>

    <el-table v-loading="listLoading" :data="data" :height="tableHeight2" style="width: 100%; overflow:auto" border>
      <el-table-column type="index" :index="indexMethod" header-align="center" align="center" label="序号" width="80px" />
      <el-table-column header-align="center" align="center" label="操作" width="130px" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleApproval(scope.row)">审批</el-button>
        
        </template>
      </el-table-column>
      <el-table-column label="流程定义名称" header-align="center" align="left" width="180" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.processName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="流程定义显示名称" header-align="center" align="left" min-width="180" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.processDisplayName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提交人" header-align="center" align="left" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.submitUserName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" header-align="center" align="right" width="190">
        <template slot-scope="scope">
          <span>{{ scope.row.submitTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="到达时间" header-align="center" align="right" width="190">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- <el-dialog :visible.sync="approvalVisible" append-to-body :show-close="false" width="800px" :title="'审批'" :close-on-click-modal="false">
      <approval v-if="approvalVisible" ref="approval" :proid="code" :visible.sync="approvalVisible" />
    </el-dialog> -->
<!-- 审批 -->
<el-dialog :close-on-click-modal="false" :visible.sync="approvalVisible" append-to-body width="900px" :title="'审批'" style="min-height:500px">
      <approval v-if="approvalVisible" ref="approval" :proid="orderId" :orderid="orderId" :templateId="id" :rabbitId="rabbitId" :taskid="taskId" :laketype="lakeType" :visible.sync="approvalVisible" />

<!--      <BuildCopy :templateId="id" v-if="lakeType==='das'"></BuildCopy>-->
<!--      <ETLConversion :templateId="id"  v-else-if="lakeType==='etl'"></ETLConversion>-->
<!--      <DSSConversion :templateId="id"  v-else-if="lakeType==='dss'"></DSSConversion>-->
    </el-dialog>
    <pagination v-show="total>-1" :total="total" :page.sync="queryPage.page" :limit.sync="queryPage.limit" @pagination="loadList" />
  </div>
</template>

<script>
import { getList, getInfoByOrderId } from '@/api/projectInfo'
import { todoList as getList2 } from '@/api/snakerflow'
import { getDictListByCode } from '@/api/dict'
import { tableHeight2 } from '@/utils/tableHeight'
import Pagination from '@/components/Pagination'

import approval from '../backlog/approval' // eslint-disable-line no-unused-vars

export default {
  components: { Pagination, approval },
  mixins: [tableHeight2],
  provide() {
    return {
      // getList: this.loadList,
      getList2: this.loadList
    }
  },
  data() {
    return {
      listLoading: false,
      queryPage: {
        page: 1,
        limit: 10
      },
      total: 0,
      code: '',
      data: [],
      approvalVisible: false,
      ywTypes: [],
      xmTypes: [],
      ynTypes: []
    }
  },
  created() {
    this.getDictList('CDS_XIANGMU_TYPE')
    this.getDictList('CDS_YEWU_STATUS')
    this.getDictList('CDS_YON')
    this.loadList()
  },
  methods: {
    indexMethod(index) {
      return (index + 1) + (this.queryPage.page - 1) * this.queryPage.limit
    },
    getDictList(code) {
      getDictListByCode(code).then(response => {
        if (code === 'CDS_XIANGMU_TYPE') {
          this.xmTypes = response.data
        }
        if (code === 'CDS_YEWU_STATUS') {
          this.ywTypes = response.data
        }
        if (code === 'CDS_YON') {
          this.ynTypes = response.data
        }
      })
    },
    getDicName(code, flag) {
      var dict = null
      if (flag === 'CDS_XIANGMU_TYPE') {
        dict = this.xmTypes
      } else if (flag === 'CDS_YEWU_STATUS') {
        dict = this.ywTypes
      } else if (flag === 'CDS_YON') {
        dict = this.ynTypes
      }
      for (var i in dict) {
        if (dict[i].code === code) {
          return dict[i].name
        }
      }
    },
    handleApproval(row) {
      this.orderId = row.orderId
      this.taskId = row.id
      this.lakeType = row.lakeType
      this.id = row.previewId
      this.rabbitId=row.previewRabbitId
      this.$nextTick(() => {
        this.$refs.approval
        this.approvalVisible = true

      })
    },
    search() { // 查询
      this.loadList()
    },
    loadList() { // 加载列表
      this.data = []
      this.listLoading = true
      this.queryPage.status = '2'

      getList2(this.queryPage).then(response => {
        const { data } = response

        this.data = data.records
        this.total = parseInt(data.total)
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    approval(scope) {
      this.approvalVisible = true
      this.code = scope.row.id
      this.$nextTick(() => {
        this.$refs.approval
        this.$refs.approval.getDetailed()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.app-container{
  padding:10px 20px;
}
.filter-container {
  padding-bottom: 10px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 10px;
  }
  .date-filter-item{
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}
.pagination-container {
  margin-top: 0 !important;
  padding: 10px 16px !important;
}
</style>
